<!-- 内容 -->

<template>
    <div>
        <!-- 搜索框 -->
        <div style="margin-bottom: 5px;">
            <el-input v-model="name" placeholder="请输入仓库名" suffix-icon="el-icon-search" style="width: 200px"
                      @keyup.enter.native="loadPost"></el-input>
            <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
            <el-button type="success" style="margin-left: 5px;" @click="resetParam">重置</el-button>
            <el-button type="primary" style="margin-left: 5px;" @click="add">新增</el-button>
        </div>

        <!--    表格内容    -->
        <el-table :data="tableData"
                  :header-cell-style="{background:'darkgrey',color:'#000000'}"
                  border
        >

            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>

            <el-table-column prop="name" label="仓库名" width="200">
            </el-table-column>

            <el-table-column prop="remark" label="备注">

            </el-table-column>

            <el-table-column prop="operate" label="操作">‘
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm
                            title="确定删除吗？"
                            @confirm="del(scope.row.id)"
                            style="margin-left: 5px"
                    >
                        <el-button slot="reference" type="danger" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="text-align: center"
        >
        </el-pagination>

        <!-- 新增框 -->
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center
                :before-close="handleClose"
        >
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">

                <el-form-item label="仓库名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-col :span="20">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "StorageManage",
        data() {
            return {
                tableData: [],
                pageSize: 10,
                pageNum: 1,
                total: 0,
                name: '',
                centerDialogVisible: false,
                form: {
                    id: '',
                    name: '',
                    remark: '',
                },

                // 数据验证
                rules: {

                    name: [
                        {required: true, message: '请输入仓库名', trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1
                this.pageSize = val;
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost()
            },

            loadPost() {
                // 执行 POST 请求
                this.$axios.post(this.$httpUrl + '/storage/listPage', {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    param: {
                        name: this.name,
                    }
                }).then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total
                    } else {
                        alert('获取数据失败')
                    }

                })
            },

            // 重置
            resetParam() {
                this.name = ''
            },

            // 添加
            add() {
                this.centerDialogVisible = true
                // 清空新增框
                this.$nextTick(() => {
                    this.resetForm();
                })
            },

            // 删除功能
            del(id) {
                console.log(id)
                this.$axios.get(this.$httpUrl + '/storage/del?id='+id).then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.loadPost()
                        this. resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },

            // 编辑功能
            mod(row) {
                this.centerDialogVisible = true

                this.$nextTick(() => {
                    //赋值到表单
                    this.form.id = row.id
                    this.form.name = row.name
                    this.form.remark = row.remark
                })
            },

            doSave(){
                this.$axios.post(this.$httpUrl + '/storage/save', this.form).then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },

            doMod(){
                this.$axios.post(this.$httpUrl + '/storage/update', this.form).then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },

            // 操作弹出框
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.form.id){
                            this.doMod();
                        }else {
                            this.doSave();
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            // 确认按钮
            handleClose(done) {
                this.$confirm('确认关闭？')
                    // eslint-disable-next-line no-unused-vars
                    .then(_ => {
                        done();
                    })
                    // eslint-disable-next-line no-unused-vars
                    .catch(_ => {});
            },

            resetForm() {
                this.$refs.form.resetFields();
            },

        },

        // 请求后端数据
        beforeMount() {
            this.loadPost();
        }
    }
</script>

<style scoped>

</style>
